<template>
  <!--  负荷转供页面  -->
  <div class="container">
    <el-tabs v-model="activeName" @tab-change="handleClick">
      <el-tab-pane label="转供策略" name="first">
        <TransferStrategy :actionData="actionsData" />
      </el-tab-pane>
      <el-tab-pane label="统计信息" name="second" lazy>
        <statistical
          ref="stationRef"
          :feederData="feederData"
          :stationData="stationData"
          :waringMessageData="waringMessageData"
        />
      </el-tab-pane>
      <el-tab-pane label="智能体信息" name="third">
        <AgendInfo ref="agentRef" :agentList="agentList" />
      </el-tab-pane>

      <el-tab-pane label="导入barry" name="forth">
       
          <div>
            <h2>文件上传</h2>
            <input type="file" @change="onFileChange" />
            <button @click="uploadFile">上传</button>
            <p v-if="uploadError">{{ uploadError }}</p>
            <p v-if="uploadSuccess">{{ uploadSuccess }}</p>
          </div>
        
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import TransferStrategy from "@/views/TransferStrategy.vue";
import Statistical from "@/views/statistical.vue";
import { ref, onMounted, onBeforeMount } from "vue";
import AgendInfo from "@/views/AgendInfo.vue";
import { getAllData } from "@/api/loadTransfer.js";
import axios from "axios";

const actionsData = ref({
  actions: [],
  czp: {},
});
const feederData = ref([]);
const stationData = ref({});
const waringMessageData = ref([]);
const agentList = ref([]);

const agentRef = ref(null);
const stationRef = ref(null);
const jsonData = ref({});

onMounted(async () => {
  // getAllData(deviceId).then((res) => {
  //   const { actions, stations, agents, czp } = res.data;
  //   actionsData.value.czp = czp;
  //   excuStatic(stations);
  //   excuActions(actions);
  //   excuAgents(agents);
  // });
});

const urlParams = new URLSearchParams(window.location.search);
const deviceId = urlParams.get("devid");
console.log("设备Id", deviceId);

// 获取策略性质
const excuActions = (data) => {
  for (const key in data) {
    const t = data[key];
    for (let i = 0; i < t.act.length; i++) {
      const obj = {};
      obj.act = t.act[i];
      obj.act_type = t.act_type;
      obj.agent = t.agent[i];
      obj.level = t.level;
      obj.switch = t.switch[i];
      obj.vn_kv = t.vn_kv[i];
      obj.operatingUnit = "城南地调";
      actionsData.value.actions.push(obj);
    }
  }
};

const excuAgents = (data) => {
  const arr = [];
  data.list.forEach((item) => {
    const obj = {};
    obj.agent = item;
    obj.obs = data.obs[item];
    obj.message = data.message[item];
    arr.push(obj);
  });

  arr.forEach((item) => {
    const messageArr = [];
    for (let i = 0; i < item.message.agent.length; i++) {
      const obj = {};
      const agent = item.message.agent[i];
      const direction = item.message.direction[i];
      const message = item.message.messages[i];
      obj.agent = agent;
      obj.direction = direction;
      obj.message = message;
      messageArr.push(obj);
    }
    item.messages = messageArr;
  });

  agentList.value = arr;
  agentRef.value.changeRow(agentList.value[0]);
};

const excuStatic = (data) => {
  for (let i = 0; i < data.feeder.target.length; i++) {
    const obj = {};
    obj.target = data.feeder.target[i];
    obj.targetPercent = data.feeder.target_percent[i];
    obj.treated = data.feeder.treated[i];
    obj.treatedPercent = data.feeder.treated_percent[i];
    obj.recoverLoad = data.feeder.recover_load[i];
    feederData.value.push(obj);
  }
  stationData.value = data.station;
  waringMessageData.value = data.warning;
};

const activeMenuName = localStorage.getItem("activeMenu");
const activeName = ref();
activeName.value = activeMenuName || "first";
const handleClick = (item) => {
  activeName.value = item;
};

 const selectedFile = ref(null);  
    const uploadError = ref('');  
    const uploadSuccess = ref('');  
  
    const onFileChange = (e) => {  
      selectedFile.value = e.target.files[0];  
    };  
  
    const uploadFile = async () => {  
      if (!selectedFile.value) {  
        return alert('请先选择一个文件！');  
      }  
  
      const formData = new FormData();  
      formData.append('file', selectedFile.value);  
  
      try {  
        const response = await axios.post('http://localhost:18902/upload', formData, {  
          headers: {  
            'Content-Type': 'multipart/form-data',  
          },  
        });  
  
        uploadSuccess.value = '文件上传成功！';  
        uploadError.value = '';  
        // 根据需要处理响应数据  
        console.log(response.data);  
      } catch (error) {  
        uploadError.value = '文件上传失败：' + error.message;  
        uploadSuccess.value = '';  
        console.error(error);  
      }  
    };  
</script>

<style scoped lang="scss">
.container {
  box-sizing: border-box;
  width: 100vw;
  min-height: 100vh;
  background-color: #19252f;
  padding: 20px;
  overflow-y: auto;
}

:deep(.el-tabs__item) {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

:deep(.el-tabs__nav-wrap:after) {
  background-color: transparent;
}

//标签激活字体颜色
:deep(.el-tabs__item.is-active) {
  color: #51e3ca;
}

// 鼠标移入标签
:deep(.el-tabs__item:hover) {
  color: #51e3ca;
}

// 激活的下标颜色
:deep(.el-tabs__active-bar) {
  background-color: transparent;
}
</style>
